import React, { Component } from 'react'
import Child from "./Child"

export default class Parent extends Component {
    state = {
        hasError: null
    }

    // 只能捕获后台组件生命周期上发生的错误，不能捕获自己组件产生的错误。同时其他组件非生命周期发生的错误，
    // 例如：自定义的方法事件，计时器等错误不能被捕获
    static getDerivedStateFromError(error) {
        console.log('@@', error);
        return {
            hasError: true
        }
    }

    // 当组件发生错误后回触发这个方法，可以在这个方法中记录错误次数
    componentDidCatch(error,info){
        console.log('&&',error,info);
        console.log('发生了错误，通知服务器');
    }

    render() {
        return (
            <div style={{ "border": '1px solid #ddd', "padding": "20px" }}>
                <h2>我的Parent组件</h2>
                {/* 判断错误是否存在，来显示不同的组件。避免一个错误影响全局页面 */}
                {this.state.hasError ? <h4>网络异常，请稍后重试</h4> : <Child />}
            </div>
        )
    }
}
